<template>
	<view class="page">
		<view class="form">
			<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
			<u--form labelPosition="left" labelWidth="80" :model="model1" :rules="rules" ref="uForm">
				<u-form-item borderBottom class="phone" label="输入原密码" prop="userInfo.name" ref="item1">
					<u--input v-model="model1.userInfo.name" fontSize="12" placeholder="请输入"/>
				</u-form-item>
				<u-form-item  borderBottom class="phone" label="输入新密码" prop="userInfo.name" ref="item1">
					<u--input v-model="model1.userInfo.name" fontSize="12" placeholder="请输入"/>
				</u-form-item>
				<u-form-item borderBottom class="phone" label="确定新密码" prop="userInfo.name" ref="item1">
					<u--input v-model="model1.userInfo.name" fontSize="12" placeholder="请输入"/>
				</u-form-item>
			</u--form>

			<u-button class="but" iconColor="#FBCC32" @click="submit">立即修改</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model1: {
					userInfo: {
						name: '',
					},
				},
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},

				}
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
		
			submit() {
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
		
		}
	}
</script>

<style scoped lang="scss">
	.page {

			background-color: #fff;
			width: 100vw;
			height: 100vh;
	}


	::v-deep .u-button {
		background-color: $theme-color !important;
	}
	::v-deep .u-form-item__body__left__content__label{
		font-size: 30rpx;
		padding-left: 20rpx;
	}
	.but{
		margin: 300rpx 20rpx 20rpx 20rpx;
	}
	
</style>